<!--
 * @Author: 郑亮 z17620994877@163.com
 * @Date: 2024-04-03 14:54:45
 * @LastEditors: 冰凌 1084359940@qq.com
 * @LastEditTime: 2024-04-13 00:05:51
 * @FilePath: \my-maple-flower-app\src\views\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="login-page">
        <div class="login-content">
            <div class="login-title">
                <h1>Sign In</h1>
            </div>
            <div class="login-input">
                <span class="login-placeholder":class="{float:userFloat}">用户名</span>
                <input @focus="focusUser" @blur="blurUser" type="text" v-model="formValue.username">
            </div>
            <div class="login-message">
                <span>{{ userMessage }}</span>
            </div>
            <div class="login-input">
                <span class="login-placeholder" :class="{float:passwordFloat}">密码</span>
                <input @focus="focusPassword" @blur="blurPassword"  type="password"  v-model="formValue.password">
            </div>
            <div class="login-message">
                <span>{{ passwordMessage }}</span>
            </div>
            <div class="login-button">
                <van-button @click="login" round block type="primary" native-type="submit">
                    <span v-show="!loading">登录</span>
                    <van-loading  color="#fff" v-show="loading" />
                </van-button>
            </div>
            <div class="login-footer">
                <span>
                    <span>还没有账号 ? 去</span>
                    <router-link to="/register" class="link">注册</router-link>
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue'
import axios from '../../server/reqeset.ts'
import { useRouter } from 'vue-router'
const router = useRouter()

const formValue = reactive({
    username: '',
    password: ''
})

const userFloat = ref(false)
const passwordFloat = ref(false)

const userMessage = ref('')
const passwordMessage = ref('')

const loading = ref(false)

// const validatorUser = (val:string)=>{
//     if(val === ''){
//         userMessage.value = '请输入用户名'
//         return '请输入用户名'
//     }
//     userMessage.value = ''
//     return ''
// }
// const validatorPassword  = (val:string)=>{
//     if(val === ''){
//         passwordMessage.value = '请输入密码'
//         return '请输入密码'
//     }
//     passwordMessage.value = ''
//     return ''
// }

const focusUser = ()=>{
    userFloat.value = true
}
const blurUser = ()=>{
    if(formValue.username === ''){
        userFloat.value = false
    }
    // validatorUser(formValue.username)
}
const focusPassword = ()=>{
    passwordFloat.value = true
}
const blurPassword = ()=>{
    if(formValue.password === ''){
        passwordFloat.value = false
    }
    // validatorPassword(formValue.password)
}

const login = async ()=>{
    if(loading.value === true){
        return
    }
    loading.value = true
    let res = await axios({
        url: '/login',
        method: 'post',
        data: {
            name:formValue.username,
            password:formValue.password
        }
    }).finally(()=>loading.value = false)
    localStorage.setItem('token',res.data)
    router.push('/list')
    
}
</script>

<style lang="scss" scoped>

.login-page {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    background-image: url("../../assets/image/login.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.9;
    .login-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        margin: auto;
        border-radius: 0.4rem;
        padding: 110px 0 160px;
        background-color:#fff;
        .login-title{
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: rgb(16, 137, 211);
            margin: 0 0 80px 0;
        }
        .login-input{
            width: 80%;
            position: relative;
            input{
                width:100%;
                height: 86px;
                background-color: #eef1ff;
                outline: none;
                border: none;
                border-radius: 0.1rem;
                padding: 40px 30px 12px;
                font-size: 26px;
                box-sizing: border-box;
            }
            .login-placeholder{
                pointer-events:none;
                color: #c3c3c3;
                position: absolute;
                z-index: 1;
                top: 24px;
                left: .4rem;
                font-size: 26px;
                transition: ease .3s;
                transform-origin: 0 0;
                &.float{
                    transform: translate(0,-.17rem) scale(0.66);
                }
            }
        }
        .login-message{
            color: #ee0a24;
            width: 80%;
            height: 30px;
            font-size: 20px;
            text-align-last: left;
        }
        .login-button{
            margin-top: 60px;
            width: 80%;
            .van-button{
                height: 60px;
                font-size: 26px;
            }
        }
        
        .login-footer{
            font-size: 16px;
            position: absolute;
            bottom: 40px;
            .link {
                color: #069;
                float: right;
                margin-right: 15px;
            }
        }
    }

}
</style>